<template>
    <div id="app">
      <h1>无缝滚动表格测试</h1>
      <SeamlessScrollTable
        :tableData="tableData"
        :tableColumns="tableColumns"
        :showHeader="true"
        :tableHeight="300"
      />
    </div>
  </template>
  
  <script setup>
  import SeamlessScrollTable from './SeamlessTable.vue';
  
  const tableData = [
    { name: '张三', age: 20 },
    { name: '李四', age: 21 },
    { name: '王五', age: 22 },
    { name: '赵六', age: 23 },
    { name: '孙七', age: 24 }
  ];
  
  const tableColumns = [
    { prop: 'name', label: '姓名' },
    { prop: 'age', label: '年龄' }
  ];
  </script>
  
  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  </style>    